<template>
  <view class="follow-container">
    <u-navbar
      title="添加跟进记录"
      :border-bottom="true"
      back-icon-color="#007aff"
      back-text="返回"
      :back-text-style="{color: '#007aff'}"
    ></u-navbar>

    <view class="content-wrapper">
      <!-- 拓展信息卡片 -->
      <view class="group-info-card">
        <view class="card-title">
          <u-icon name="home-fill" size="24" color="#2b85e4"></u-icon>
          <text>{{ expansionInfo.groupName }}</text>
        </view>
        <view class="info-row">
          <text class="info-label">拓展产品：</text>
          <text class="info-value">{{ expansionInfo.productName }}</text>
        </view>
        <view class="info-row">
          <text class="info-label">产品类别：</text>
          <text class="info-value">{{ expansionInfo.categoryName }}</text>
        </view>
        <view class="info-row">
          <text class="info-label">预计数量：</text>
          <text class="info-value">{{ expansionInfo.quantity }}</text>
        </view>
        <view class="info-row">
          <text class="info-label">预计金额：</text>
          <text class="info-value">{{ expansionInfo.amount }}元/年</text>
        </view>
        <view class="info-row">
          <text class="info-label">预计落地时间：</text>
          <text class="info-value">{{ expansionInfo.expectedTime }}</text>
        </view>
      </view>

      <!-- 跟进表单 -->
      <view class="form-card">
        <view class="form-header">
          <u-icon name="edit-pen" size="24" color="#2b85e4"></u-icon>
          <text>跟进信息</text>
        </view>

        <view class="form-content">
          <view class="form-group">
            <view class="form-label required">跟进状态</view>
            <view class="form-control status-select">
              <u-select v-model="showStatusSelect" :list="statusOptions" @confirm="onStatusConfirm"></u-select>
              <view class="input-box" @click="showStatusSelect = true">
                <text class="input-text">{{ form.statusText || '请选择跟进状态' }}</text>
                <u-icon name="arrow-right" size="16" color="#c0c4cc"></u-icon>
              </view>
            </view>
          </view>

          <view class="form-group">
            <view class="form-label required">跟进时间</view>
            <view class="form-control date-picker">
              <u-datetime-picker v-model="showDatePicker" mode="datetime" @confirm="onDateConfirm">
                <view class="picker-value">
                  <text>{{ form.followTime || '请选择跟进时间' }}</text>
                  <u-icon name="calendar" size="16" color="#c0c4cc"></u-icon>
                </view>
              </u-datetime-picker>
            </view>
          </view>

          <view class="form-group">
            <view class="form-label required">跟进内容</view>
            <view class="form-control">
              <u-field
                v-model="form.content"
                type="textarea"
                placeholder="请输入跟进内容，如沟通要点、客户需求等"
                height="120"
                :border-bottom="false"
                class="content-textarea"
              ></u-field>
            </view>
          </view>

          <view class="form-group" v-if="form.status === '已落地'">
            <view class="form-label required">实际签约金额(元/年)</view>
            <view class="form-control">
              <u-input
                v-model="form.actualAmount"
                type="number"
                placeholder="请输入实际签约金额"
                border="bottom"
              ></u-input>
            </view>
          </view>

          <view class="form-group" v-if="form.status === '已落地'">
            <view class="form-label required">签约日期</view>
            <view class="form-control date-picker">
              <u-datetime-picker
                v-model="showSignDatePicker"
                mode="date"
                @confirm="onSignDateConfirm"
              >
                <view class="picker-value">
                  <text>{{ form.signDate || '请选择签约日期' }}</text>
                  <u-icon name="calendar" size="16" color="#c0c4cc"></u-icon>
                </view>
              </u-datetime-picker>
            </view>
          </view>

          <view class="form-group">
            <view class="form-label">上传附件</view>
            <view class="form-control">
              <u-upload
                :file-list="fileList"
                @afterRead="afterRead"
                @delete="deletePic"
                name="file"
                multiple
                :max-count="3"
                width="200"
                height="200"
              ></u-upload>
            </view>
          </view>

          <view class="form-group" v-if="form.status === '已废弃'">
            <view class="form-label required">失败原因</view>
            <view class="form-control status-select">
              <u-select
                v-model="showReasonSelect"
                :list="failReasonOptions"
                @confirm="onReasonConfirm"
              ></u-select>
              <view class="input-box" @click="showReasonSelect = true">
                <text class="input-text">{{ form.failReason || '请选择失败原因' }}</text>
                <u-icon name="arrow-right" size="16" color="#c0c4cc"></u-icon>
              </view>
            </view>
          </view>
        </view>
      </view>
    </view>

    <!-- 底部按钮 -->
    <view class="button-group">
      <u-button type="primary" @click="saveFollow" :loading="isSaving">提交</u-button>
      <u-button type="default" @click="goBack" :plain="true">取消</u-button>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      expansionId: "",
      expansionInfo: {},
      isSaving: false,
      showStatusSelect: false,
      showDatePicker: false,
      showSignDatePicker: false,
      showReasonSelect: false,
      fileList: [],
      form: {
        status: "",
        statusText: "",
        followTime: "",
        content: "",
        actualAmount: "",
        signDate: "",
        failReason: ""
      },
      statusOptions: [
        { label: "跟进中", value: "跟进中" },
        { label: "已落地", value: "已落地" },
        { label: "已废弃", value: "已废弃" }
      ],
      failReasonOptions: [
        { label: "价格因素", value: "price" },
        { label: "产品因素", value: "product" },
        { label: "竞争因素", value: "competition" },
        { label: "客户决策原因", value: "decision" },
        { label: "其他原因", value: "other" }
      ]
    };
  },
  onLoad(options) {
    if (options.id) {
      this.expansionId = options.id;
      this.getExpansionInfo();
    } else {
      uni.showToast({
        title: "缺少拓展记录ID",
        icon: "none"
      });
      setTimeout(() => {
        uni.navigateBack();
      }, 1500);
    }

    // 默认设置当前时间为跟进时间
    this.form.followTime = this.formatDateTime(new Date());
  },
  methods: {
    // 获取拓展信息
    getExpansionInfo() {
      // 这里应该调用接口获取数据
      // 模拟数据
      this.expansionInfo = {
        id: this.expansionId,
        groupName: "平凉市政府",
        categoryName: "专线",
        productName: "互联网专线",
        quantity: 5,
        amount: 50000,
        expectedTime: "2023-12-31"
      };
    },

    // 选择跟进状态
    onStatusConfirm(e) {
      this.form.status = e[0].value;
      this.form.statusText = e[0].label;
    },

    // 选择跟进时间
    onDateConfirm(e) {
      this.form.followTime = this.formatDateTime(e);
      this.showDatePicker = false;
    },

    // 选择签约日期
    onSignDateConfirm(e) {
      this.form.signDate = this.formatDate(e);
      this.showSignDatePicker = false;
    },

    // 选择失败原因
    onReasonConfirm(e) {
      this.form.failReason = e[0].label;
    },

    // 格式化日期时间
    formatDateTime(date) {
      const d = new Date(date);
      const year = d.getFullYear();
      const month = String(d.getMonth() + 1).padStart(2, "0");
      const day = String(d.getDate()).padStart(2, "0");
      const hour = String(d.getHours()).padStart(2, "0");
      const minute = String(d.getMinutes()).padStart(2, "0");
      return `${year}-${month}-${day} ${hour}:${minute}`;
    },

    // 格式化日期
    formatDate(date) {
      const d = new Date(date);
      const year = d.getFullYear();
      const month = String(d.getMonth() + 1).padStart(2, "0");
      const day = String(d.getDate()).padStart(2, "0");
      return `${year}-${month}-${day}`;
    },

    // 上传文件后回调
    afterRead(event) {
      const { file } = event;
      this.fileList.push({
        url: file.url,
        status: "uploading",
        message: "上传中"
      });

      // 模拟上传
      setTimeout(() => {
        const index = this.fileList.length - 1;
        this.fileList[index].status = "success";
        this.fileList[index].message = "";
      }, 1500);
    },

    // 删除文件
    deletePic(event) {
      this.fileList.splice(event.index, 1);
    },

    // 表单验证
    validateForm() {
      if (!this.form.status) {
        uni.showToast({
          title: "请选择跟进状态",
          icon: "none"
        });
        return false;
      }
      if (!this.form.followTime) {
        uni.showToast({
          title: "请选择跟进时间",
          icon: "none"
        });
        return false;
      }
      if (!this.form.content) {
        uni.showToast({
          title: "请输入跟进内容",
          icon: "none"
        });
        return false;
      }

      if (this.form.status === "已落地") {
        if (!this.form.actualAmount) {
          uni.showToast({
            title: "请输入实际签约金额",
            icon: "none"
          });
          return false;
        }
        if (!this.form.signDate) {
          uni.showToast({
            title: "请选择签约日期",
            icon: "none"
          });
          return false;
        }
      }

      if (this.form.status === "已废弃" && !this.form.failReason) {
        uni.showToast({
          title: "请选择失败原因",
          icon: "none"
        });
        return false;
      }

      return true;
    },

    // 保存跟进记录
    saveFollow() {
      if (!this.validateForm()) return;

      this.isSaving = true;

      // 这里应该调用接口保存数据
      // 模拟接口调用
      setTimeout(() => {
        this.isSaving = false;
        uni.showToast({
          title: "提交成功",
          icon: "success"
        });

        // 返回上一页
        setTimeout(() => {
          uni.navigateBack();
        }, 1500);
      }, 1000);
    },

    // 返回上一页
    goBack() {
      uni.navigateBack();
    }
  }
};
</script>

<style lang="scss">
.follow-container {
  min-height: 100vh;
  background-color: #f7f8fa;
  padding-bottom: 120rpx;

  .content-wrapper {
    padding: 20rpx;
  }

  .group-info-card {
    background: linear-gradient(135deg, #ffffff, #f8fbff);
    border-radius: 16rpx;
    padding: 30rpx;
    margin-bottom: 20rpx;
    box-shadow: 0 6rpx 20rpx rgba(43, 133, 228, 0.08);
    border: 1rpx solid rgba(230, 230, 230, 0.5);
    transform: translateZ(0);
  }

  .card-title {
    display: flex;
    align-items: center;
    font-size: 36rpx;
    font-weight: 600;
    color: #2c3e50;
    margin-bottom: 24rpx;
    padding-bottom: 16rpx;
    border-bottom: 1rpx solid rgba(230, 230, 230, 0.6);
  }

  .card-title text {
    margin-left: 20rpx;
  }

  .info-row {
    display: flex;
    margin-bottom: 12rpx;
  }

  .info-row:last-child {
    margin-bottom: 0;
  }

  .info-label {
    width: 200rpx;
    color: #7f8c8d;
    font-size: 28rpx;
  }

  .info-value {
    flex: 1;
    color: #34495e;
    font-size: 28rpx;
    font-weight: 500;
  }

  .form-card {
    background: #ffffff;
    border-radius: 16rpx;
    padding: 30rpx;
    margin-bottom: 24rpx;
    box-shadow: 0 6rpx 20rpx rgba(0, 0, 0, 0.05);
    border: 1rpx solid rgba(230, 230, 230, 0.5);
    transform: translateZ(0);
  }

  .form-header {
    display: flex;
    align-items: center;
    font-size: 32rpx;
    font-weight: 600;
    color: #2c3e50;
    margin-bottom: 24rpx;
    padding-bottom: 16rpx;
    border-bottom: 1rpx solid rgba(230, 230, 230, 0.6);
  }

  .form-header text {
    margin-left: 20rpx;
  }

  .form-content {
    margin-bottom: 25rpx;
  }

  .form-group {
    margin-bottom: 36rpx;
  }

  .form-label {
    font-size: 28rpx;
    color: #606266;
    margin-bottom: 16rpx;

    &.required:before {
      content: "*";
      color: #ff4d4f;
      margin-right: 8rpx;
    }
  }

  .form-control {
    position: relative;
  }

  .date-picker,
  .status-select {
    padding: 20rpx 0;
    border-bottom: 1rpx solid #e4e7ed;
  }

  .picker-value,
  .input-box {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 28rpx;
    color: #333;
    height: 48rpx;
  }

  .content-textarea {
    background-color: #f8f9fa;
    border-radius: 16rpx;
    padding: 20rpx;
    border: 1rpx solid rgba(230, 240, 250, 0.7);
  }

  .button-group {
    position: fixed;
    left: 0;
    bottom: 0;
    width: 100%;
    display: flex;
    justify-content: space-between;
    padding: 30rpx;
    background-color: #ffffff;
    box-shadow: 0 -2rpx 10rpx rgba(0, 0, 0, 0.05);

    .u-button {
      flex: 1;
      margin: 0 10rpx;
    }
  }
}
</style> 